import React from 'react';
import { Editor } from '@tiptap/react';

interface FormatPainterProps {
  editor: Editor;
  formatPainter: { active: boolean; format: any } | null;
  setFormatPainter: (value: { active: boolean; format: any } | null) => void;
}

const FormatPainter: React.FC<FormatPainterProps> = ({
  editor,
  formatPainter,
  setFormatPainter
}) => {
  const handleClick = () => {
    if (!formatPainter?.active) {
      const { empty } = editor.state.selection;
      if (empty) {
        return;
      }

      const format = {
        marks: editor.state.selection.$from.marks().map(mark => ({
          type: mark.type.name,
          attrs: mark.attrs
        })),
        textStyle: editor.getAttributes('textStyle'),
      };

      setFormatPainter({ active: true, format });
    } else {
      setFormatPainter(null);
    }
  };

  return (
    <button
      onClick={handleClick}
      className={`toolbar-button ${formatPainter?.active ? 'is-active' : ''}`}
      title="格式刷"
    >
      <i className="icon">✏️</i>
    </button>
  );
};

export default FormatPainter;